<!--
 * @Author: your name
 * @Date: 2021-02-20 17:34:41
 * @LastEditTime: 2021-02-22 14:03:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\wifi\bindWifi.vue
-->
<template>
    <div>
        <el-dialog
            :title="$t('add')"
            :visible="newVisible"
            class="el-dialog-sm"
            @close="()=>{$store.commit('setNewVisible',false)}" width='800px'
            :close-on-click-modal='false'
            >
            <div v-loading='loadingBox'>
                <el-row :gutter="20">
                    <el-col :span="17" :offset="3">
                        <el-form ref="form" :model="form" label-width="160px" >
                            <el-form-item :label="$t('vsite.userType')" prop="salerType" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                <el-select v-model="form.salerType" :placeholder="$t('pleaseSelect')">
                                    <el-option
                                    v-for="item in userTypeList"
                                    :key="item.id"
                                    :label="item.text"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item :label="$t('system.user-account')" prop="salerId" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                <el-select v-model="form.salerId" :placeholder="$t('pleaseSelect')" 
                                filterable
                                remote
                                reserve-keyword
                                :remote-method="remoteMethod"
                                :loading="loading"
                                >
                                    <el-option
                                    v-for="item in loginNameDataList"
                                    :key="item.id"
                                    :label="item.firmName"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setNewVisible',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('sure')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTableNew'
export default {
    components: {
        baseTable
    },
    props: {
        flowModalWifuSn:{
            type:String,
            default:''
        },
    },
    data() {
        return {
            form:{
                salerType:'3',
                salerId:''
            },
            userTypeList:[
                {
                    id:'3',
                    text:this.$t('agent')
                },
                {
                    id:'4',
                    text:this.$t('installer')
                },
            ],
            loading:false,
            loadingBox:false,
            loginNameDataList:[]
        };
    },
    computed: {
        newVisible(){
            return this.$store.state.sysStore.newVisible
        }
    },
    watch: {
    },
    created() {

    },
    mounted() {

    },
    methods: {
        async saleAddEntity(){
            this.loadingBox = true
            let res = await this.API.saleAddEntity({
                wifiSN:this.flowModalWifuSn,
                salerType:this.form.salerType,
                salerId:this.form.salerId,
                salerName:this.returnName(),
            })
            this.loadingBox = false
            if(this.comm.showMsg(res.success)){
                this.form = {
                    salerType:'3',
                    salerId:''
                }
                this.loginNameDataList = []
                this.$store.commit('setNewVisible',false)
                this.$emit('uploadData',true)
            }
        },
        returnName(){
            let name = ''
            this.loginNameDataList.forEach(item =>{
                if(this.form.salerId == item.id){
                    name = item.firmName
                }
            })
            return name
        },
        async remoteMethod(query){
            this.loading = true
            let res = await this.API.saleGetDptBusinessList({
                name:query,
                type:this.form.salerType
            })
            this.loginNameDataList = res || []
            this.loading = false
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.saleAddEntity()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
